<template>
<div>
  <div id="login">
     <el-form :model="form"  ref="form" label-width="100px" class="demo-ruleForm" :rules="rules">
        <el-form-item label="账号" prop="uAccount">
            <el-input type="text" v-model="form.uAccount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="uPassword">
            <el-input type="password" v-model="form.uPassword" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="primary" @click="regist">注册</el-button>
        </el-form-item>
     </el-form>
  </div>
</div>
</template>

<script>
/**
 * mvc   view:1,收集数据;2,发送请求;3,处理响应
 */

export default {
    data(){
        return {
            form:{ 
                uAccount:"",
                uPassword:""
            },
            rules: {
                uAccount: [
                    {required: true, message: '用户名不能为空'}
                    ],
                uPassword: [
                    {required: true, message: '密码不能为空'},
                    {min: 6, message: 'password must be at least 6 characters'}
                    ]
            },
            };
    },
    methods:{
        login(){
        console.log(".....login.....");
        let self=this;
        this.$axios.post("/auth/login",this.form)
        .then((response)=>{
            if (response.data.code==200) {
                alert("登录成功！")
                let r=response.data.data;
                sessionStorage.setItem("u",JSON.stringify(r));
                if(r.uState==1){
                    this.$router.push("/Home/user"); 
                }else if(r.uState==2 || r.uState==3){
                    this.$router.push("/UHome/BDMap");
                }
            }else{
                alert("登录失败")
            }
        });
        
      },
      regist(){
        this.$router.push("/regist");
      },
      resetForm(){
          this.form={};
      }
    }
}
</script>

<style>
    #login{
        width: 600px;
        margin: auto;
        margin-top: 150px;
    }

</style>